<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file="../header.jsp"%>
</head>
<body>
	<form id="formId" class="layui-form layui-form-pane" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名</label>
			<div class="layui-input-block">
				<input type="text" name="name" autocomplete="off"
					placeholder="请输入商品名" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品副标题</label>
			<div class="layui-input-block">
				<input type="text" name="subtitle" autocomplete="off"
					placeholder="请输入商品副标题" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品分类</label>
			<div class="layui-input-inline">
				<select name="" lay-filter="filter">
					<option value="">请选择一级分类</option>
					<c:forEach items="${topCategoryList}" var="category">
						<option value="${category.id}">${category.name}</option>
					</c:forEach>
				</select>
			</div>
			<div class="layui-input-inline">
				<select id="categoryId" name="categoryId">
					<option value="">请选择二级分类</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品价格</label>
			<div class="layui-input-inline">
				<input type="text" name="price" autocomplete="off"
					placeholder="请输入商品价格" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品库存</label>
			<div class="layui-input-inline">
				<input type="text" name="stock" autocomplete="off"
					placeholder="请输入商品库存" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" pane="">
			<label class="layui-form-label">商品状态</label>
			<div class="layui-input-inline">
				<input type="radio" name="status" value="1" title="在售" checked="">
				<input type="radio" name="status" value="2" title="下架">
			</div>
		</div>
		<div class="layui-form-item" pane="">
	    	<label class="layui-form-label">商品主图</label>
	    	<div class="layui-input-inline">
				<div class="layui-upload-list">
					<input type="hidden" name="mainImage" />
					<img class="layui-upload-img" id="mainImageId" width="150px" height="150px">
					<p id="demoText"></p>
				</div>
	    		<button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
			</div>
	   	</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">商品详情</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" id="detailId" name="detail"
					class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<input type="button" class="layui-btn" onclick="submitForm()" value="立即添加" />
		</div>
	</form>
	<script type="text/javascript" src="${path}/resources/kindeditor/kindeditor.js"></script>
	<script type="text/javascript" src="${path}/resources/kindeditor/lang/zh_CN.js"></script>
	<script type="text/javascript">
		layui.use(['form', 'laydate', 'upload'], function() {
			var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
			//但是，如果你的HTML是动态生成的，自动渲染就会失效
			//因此你需要在相应的地方，执行下述方法来进行渲染
			var laydate = layui.laydate;
			var upload = layui.upload;
			
			form.render();
			//普通图片上传
			var uploadInst = upload.render({
			  elem: '#uploadBtn'
			  ,url: '${path}/uploadImg.action' //改成您自己的上传接口
			  ,before: function(obj){
			    //预读本地文件示例，不支持ie8
			    obj.preview(function(index, file, result){
			      $('#mainImageId').attr('src', result); //图片链接（base64）
			    });
			  }
			  ,done: function(jsonResult){
			    if(jsonResult.code == 0){
			  	  $('input[name="mainImage"]').val(jsonResult.data);
			    } else {
			      return layer.msg('上传失败');
			    }
			  }
			  ,error: function(){
			    //演示失败状态，并实现重传
			    var demoText = $('#demoText');
			    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			    demoText.find('.demo-reload').on('click', function(){
			      uploadInst.upload();
			    });
			  }
			});
			
			// layui监听下拉框选中事件
			form.on('select(filter)', function(data){
				console.log(data.elem); //得到select原始DOM对象
				console.log(data.value); //得到被选中的值
				console.log(data.othis); //得到美化后的DOM对象
				
				$.post(
					'${path}/product/selectSecondCategoryList.action',
					{'topCategoryId' : data.value},
					function(jsonResult) {
						console.log(jsonResult);
						var list = jsonResult.data;
						var html = ' <option value="">请选择</option>';
						$(list).each(function() {
							html +=  '<option value="'+this.id+'">'+this.name+'</option>';
						});
						$('#categoryId').html(html);
						form.render('select');// 刷新select选择框
					},
					'json'
				);
			}); 
		});
		function submitForm() {
			$.post('${path}/product/insert.action', $('#formId').serialize(),
					function(jsonObj) {
						if (jsonObj.code == 0) {
							mylayer.successMsg(jsonObj.msg);
							var index = layer.getFrameIndex(window.name);
							setTimeout(function() {
								layer.close(index);
								window.parent.location.reload();
							}, 1000);
						} else {
							mylayer.errorMsg(jsonObj.msg);
						}
					}, 'json');
		}
		KindEditor.ready(function(K) {
		    var kingEditorParams = {
		         afterBlur: function () { this.sync(); }
		    }
		    KindEditor.create('#detailId', kingEditorParams);
		});
	</script>
	
</body>
</html>